<template>
  <div class="week">
      <div class="week-desc">
          <div class="week-desc-content">
              ////////<span>周末出游</span>////////
              <p> 致力推荐超完美套餐</p>
          </div>
      </div>
      <div class="week-swiper">
           <swiper :options="swiperOption">
                <swiper-slide v-for="item of weekendSwipr" :key="item.id">
                    <div class="weekSwiper-item">
                        <div class="weekSwiper-item-img">
                            <img :src="item.imgUrl">
                        </div>
                        <div class="weekSwiper-item-desc">
                            {{item.desc}}
                            <p> {{item.detail}}</p>
                        </div>
                    </div>
                </swiper-slide>
           </swiper>
      </div>
  </div>
</template>

<script>
export default {
  name: 'homeWeekend',
  props:{
    weekendList:Array  //请求但是不用
  },
  data () {
    return {
        swiperOption:{
            loop:true,
            freeMode:true,
            spaceBetween:20,
            slidesPerView:3
        },
        weekendSwipr:[
            {
                id:'0001',
                imgUrl: require('@/assets/img/louguan.jpg'),
                desc:'拈花湾',
                detail:'禅意假日 古韵风光 '
            },
             {
                id:'0002',
                imgUrl: require('@/assets/img/caishen.jpg'),
                desc:'财神庙',
                detail:'云雾缭绕 深山古寺 '
            },
             {
                id:'0003',
                imgUrl: require('@/assets/img/shuijie.png'),
                desc:'水街',
                detail:'江南水乡 曼妙婉约 '
            },
            {
                id:'0004',
                imgUrl: require('@/assets/img/bailuyuan.png'),
                desc:'白鹿原',
                detail:'浐曲雁飞下 秦原人葬回 '
            },
        ]
    }
  }
}
</script>

<style lang="stylus" scoped>
    .week
      overflow :hidden
      height :0
      padding-bottom :58%
      border-top:.2rem solid #eee
      .week-desc
       overflow :hidden
       height :0
       padding-bottom :15.5%
       .week-desc-content
        text-align :center
        color :#aaa
        position :relative
        top :50%
        left :50%
        transform :translate(-50%,0%)
       .week-desc-content>span
        display :inline-block
        color :#000
        font-weight :bold
        margin :.15rem .3rem
      .week-swiper
        overflow :hidden
        width :88.4%
        height :0
        padding-bottom :84.5%
        .weekSwiper-item
          overflow :hidden
          width :100%   
          height: 0.14rem;
          padding-bottom :102%
          margin-left :.2rem 
          border:.02rem solid  #ccc
          .weekSwiper-item-img
            overflow :hidden
            width :100%    
            height :0
            padding-bottom :50.9%
          .weekSwiper-item-img>img
            max-width :100%
          .weekSwiper-item-desc
            text-align :center
            padding-top :.3rem
            font-size :.2rem
          .weekSwiper-item-desc>p
            display :inline-block
            margin-top :.1rem
</style>
